<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="icon" th:href="@{/images/logo.png}" type="image/x-icon"/>
    <meta charset="UTF-8"/>
    <meta name="referrer" content="no-referrer"/>
    <title>选课列表</title>
    <!-- jquery -->
    <script src="//lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <script type="text/javascript" th:src="@{/js/common.js}"></script>

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


    <!--    md5加密-->
    <script src="http://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.min.js"></script>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">

    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>

    <style>
        .row {
            margin-top: -25px
        }

        .container-fluid {
            padding-top: 36px;
            margin-left: 22px;
            margin-right: 22px;
            padding-bottom: 10px;
            background-color: white;
            margin-bottom: -37px;
            margin-top: -7px;
        }

        body {
            background-color: #F7F6F7;
        }

    </style>
</head>
<body>

<!--导航栏-->
<div th:replace="common/common::navigation"></div>

<!--主体-->
<div class="container-fluid">
    <div class="row">
        <!-- 左边----课程列表 -->
        <div class="col-xs-12 col-lg-9 col-md-12" style="height: 551px;">
            <h3>
                <span class="glyphicon glyphicon-list" aria-hidden="true" style="margin-right: 8px;"></span>
                <span>课程列表</span>
            </h3>
            <hr>

            <!--课程-->

                <table class="table table-hover table-striped ">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>课程名称</th>
                        <th>授课老师</th>
                        <th>开课人数</th>
<!--                        <th>课时</th>-->
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th>1</th>
                        <td>高数</td>
                        <td>李四</td>
                        <td>50</td>
<!--                        <td>1-10周</td>-->


                        <a href='javascript:void(0);' th:onclick="|selectCourse(${course.id})|">
                            <button type="button" class="btn btn-info">编辑</button>
                        </a>


                        <a href='javascript:void(0);' th:onclick="|selectCourse(${course.id})|">
                            <button type="button" class="btn btn-danger">删除</button>
                        </a>

                    </tr>

                    </tbody>
                </table>


        </div>

        <!--            分页-->
        <div style="text-align: right;">
            <div class="col-xs-12 col-lg-9 col-md-12">
                <div th:replace="common/common::pagination"></div>
            </div>
        </div>
    </div>
</div>


</body>
<script>
    function selectCourse(courseId) {
        var loading = layer.load(0, {
            shade: false,
            time: 2 * 1000
        });

        $.post(
            CONTEXT_PATH + "/selectCourse",
            {
                courseId: courseId
            },
            function (data) {
                layer.close(loading)

                layer.msg(data.msg);
                setTimeout(function () {
                    location.reload()
                }, 800)

            }
        )

    }


    function dropCourse(courseId) {
        var loading = layer.load(0, {
            shade: false,
            time: 2 * 1000
        });
        $.post(
            CONTEXT_PATH + "/dropCourse",
            {
                courseId: courseId
            },
            function (data) {
                layer.close(loading)

                layer.msg(data.msg)
                setTimeout(function () {
                    location.reload()
                }, 800)
            }
        )
    }


</script>
</html>